Skip to main content

yTable

ybutton

Description​

The yTable component serves as a powerful tool primarily designed for displaying and interacting with an entity. It's an adaptable element that allows both static and dynamic content.

With the yTable you can display tables of any kind and data from any entity of your liking.

Some uses for the yTable are:

Basic Structure​

In the following the basic structure of the yTable shall be explained. For the general structure of a yComponent please visit the YBase-components basic-structure.

The yTable as seen above contains a header, columns, rows and a footer.

The header contains the title of the table and toggleable functions for adding rows or filtering columns. It is normally visible, but can also be toggled such as the elements inside the header. You can find further explanation at the TableHeader Property and TableHeader Title.

Columns​

The columns consist of many sub components. Together the ColumnHeader, CounterColumn and UtilsColumn form the columns. All three of them are normally visible but can be made unseen. The CounterColumn contains a counter to show the actual index of a row. The UtilsColumn allows to have edit options for any row. The ColumnHeader renders the existing properties of an entity as columns.

Rows​

The rows are the actual data entries of an entity and present this data visually. You can find further explanation at the Row Property.

Finally the TableFooter contains any options for pagination. It is normally visible, but can be toggled if needed. You can find further explanation at the TableFooter Property.

Properties​

Through its various properties the yTable can be configured to suit your needs. The display below provides you with an overview of all the yTable properties.

Properties can be changed directly through three methods:

  • Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
  • It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
  • Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.
METAread more
Name: componentId
Not Editable
Number Property
--y-table__component-id

The identifier of the component that is unique within a page.

Name: componentType
Not Editable
String Property
--y-table__component-type

The type of the component. For this component it is -table.

Name: name
String Property
--y-table__name

The custom name of the component. It serves for better identification of the component.

Name: version
String Property
--y-table__version

The custom version of the Table-component. This can be used to ensure that all components work well together.

Name: coreTheme
String Property
--y-table__core-theme

The CoreTheme, which will be apllied to the Table. For further information on themes visit the themes page.

Name: subTheme
String Property
--y-table__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Table. For further information on themes visit the themes page.

Name: groupTheme
String Property
--y-table__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more
Name: display
String Property
--y-table__display

This property specifies the display behavior of the component. This can be be set to:

  • none
  • block
  • flex
  • inline
Name: position
Not Editable
String Property
--y-table__position

This property specifies the type of positioning method used for the component. This can be be set to:

  • static
  • relative
  • absolute
  • sticky
  • fixed
Name: visible
String Property
--y-table__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more
Name: minWidth
Injectable
UnitNumber Property
--y-table__min-width

The minimum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: minHeight
Injectable
UnitNumber Property
--y-table__min-height

The minimum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
Name: width
Injectable
UnitNumber Property
--y-table__width

The value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: height
Injectable
UnitNumber Property
--y-table__height

The value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • auto
Name: maxWidth
Injectable
UnitNumber Property
--y-table__max-width

The maximum value for the width of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: maxHeight
Injectable
UnitNumber Property
--y-table__max-height

The maximum value for the height of the component. This can be set in:

  • px
  • pt
  • em
  • vw
  • vh
  • %
  • none
Name: flex
String Property
--y-table__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more
Name: marginTop
Injectable
UnitNumber Property
--y-table__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight
Injectable
UnitNumber Property
--y-table__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom
Injectable
UnitNumber Property
--y-table__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft
Injectable
UnitNumber Property
--y-table__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop
Injectable
UnitNumber Property
--y-table__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight
Injectable
UnitNumber Property
--y-table__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom
Injectable
UnitNumber Property
--y-table__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft
Injectable
UnitNumber Property
--y-table__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Usage​

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the yTable in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations​

Table Elevated
Table Flat
Table Plain
styletableHeadertable-header__visiblefalse
styletableFootertable-footer__visiblefalse
stylecounterColumnshow-counter-columnfalse
styleutilsColumnshow-utils-columnfalse

Blank​

@Note insert image here

styletableHeadertable-header__visiblefalse
styletableFootertable-footer__visiblefalse
stylecounterColumnshow-counter-columnfalse
styleutilsColumnshow-utils-columnfalse

Scrollbehavior​

For purposes of loading a certain amount of data, one needs to think about a balance between performance and usability. A huge amount of data can take time to fetch and to render.
Therefore we offer a possibility to address these problems and find a solution.

  • Basic
    This causes the data to be loaded at once. Applicable for small amounts of data.
  • Infinite
    At first only the visible data entries are rendered, whilst other entries only get loaded and rendered additionally, once the user is scrolling.
  • Virtual
    During rapid scrolling, virtual scrolling is employed internally, accompanied by a simplified scroll animation. Actual data retrieval and rendering occur only during slower scrolling, ensuring that data is loaded only when the user can effectively engage with it.
stylebodyCellbody-cell__render-typeBasic

Interactive Filtering​

In combination with the integrated SourceLink system, you can build an automatic and interactive filtering.

For instance you could filter the table based on a selection inside another yTable.

How to:

  1. Change the module to @Note insert a hotlink here Entity-Editor.
  2. Create two entities with names "Order" and "Customer".
  3. Inside the "Order" entity, create a number property: "customerId".
  4. Inside the "Customer" entity, create two string properties with the names "surname" and "name".
  5. Change the module to UI-Designer.
  6. Create two yTable components in your application and connect each one to the entities you created before.
  7. Select the created yTable which is connected to the "Order" table and proceed to the "Links" section within the Detail Panel.
  8. Create a SourceLink on the other yTable on the "select-row" event and select "_id" as the Data-Property.
  9. Insert following string into the "template-filter": customerId eq {value}

When both entities contain valid data, the "Order" table gets filtered each time a row in the "Customer" table gets selected, filtering based in the "customerId", showing only the orders the selected customer did.

Toggle user actions​

  1. Header actions
    Actions that are related to the table as a whole. This means that these actions affect the table itself.
  2. Row actions
    These actions apply to single rows.

@Note insert image here

styletableHeaderadd-recordfalse
styletableHeadervisible-columnsfalse
styletableHeaderrefreshfalse

Pagination​

For instance the pagination is a complex construct for defining how many data entries are loaded per view, without the the necessity to change the table page.
For this purpose the table includes mechanisms to control this usecase.

How to:

  1. Creating new pagination options
    1. Open the Detail Panel and navigate to the "Style" tab to open the "TableFooter" section.
    2. Open the Optionlist Picker by clicking on "rows-per-page-options".
    3. This provides an overview of the existing options. Now create a new entry and set "value" and "label" to 75.
  2. Setting an initial value:
    1. In the Detail Panel, navigate to the "Style" tab and open the "TableFooter" section.
    2. Set the "rows-per-page" to 75.

@Note insert image here

stylebodyCellbody-cell__height20px
styletableFooterrows-per-page50

Selection styling​

There are two different approaches of styling a selection inside the table, whic can also be combined.

  • Row
  • Cell

@Note insert image here

stylerowrow-selected__bg-color#FF0000
stylerowrow-selected__opacity50%

Changing display types​

The purpose of this feature presents it's necessity in displaying values of data entries in different variations.

While this might sound confusing for entries like e.g. names or numbers, in fact it's pretty useful for things like boolean values or images. For instance having an image url which holds a profile picture of every user of your guestlist might require rendering this image as a real image and not displaying the url of it.

info

When changing the display of a column, you always need to select one and make sure the changes you made apply for the data which is stored.

E.g. while displaying a string "true" as a checkbox might work, displaying an url in the same way does not make sense at all.

@Note insert image here

columnsgenericdisplay tableimage
columnsgenericdisplay edit dialogtext

Individual columns​

In comparison to changing styles which apply to all cells, you can individualize each column to appear in a unique style.

This also includes the previous example Display of Cells and holds much more possibilities like changing sizing or coloration of special columns.

@Note insert image here

columnsgenericlabelMyCustomColumn
columnsgenericbody-cell__min-width50px
columnscolumnbody-cell__font-size22px
columnscolumnbody-cell__font-weight500

Special Picker​

Entity filter​

With this picker you can adjust the yTable to liking by filtering the elements to be rendered.

@Note insert image here

Inside the header the rows per page can be defined. Here you can define a concrete number of rows or choose automatic determination which can be helpful.

The core of the picker shows a hypothetic presentation of the table itself. This interactive table allows you to choose all elements that should be displayed, simply by clicking them.

Entity selector​

This picker allows you to select the current data source of your yTable and to select all properties that should be fetched.

@Note insert image here

First of all, a selection can be made of every entity in the current database. This implies that there is no selection of external data to this day.
After you chose an entity, it's properties can be filtered and a selection can be made. This affects which properties are being fetched from the database. Therefore only this data will be availlable until you change the selection.

info

This can't be compared to a classic filtering. You only get your selection of properties! So different from filtering, not all properties are being fetched and loaded.

Table dimensions​

As the name implies you can set dimension related properties inside this picker.

@Note insert image here

The picker can be divided into three different areas:

  • Table
    This manipulates the actual width and height of the table itself.
  • Cell
    Here you can set the height for the cells inside the table.
  • Cell-Padding
    This area offers the manipulation of the padding inside the cells